<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
    <title>地图显示</title>
    <style>
        html,
        body,
        #container {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<div id="container"></div>
<!-- 加载地图JSAPI脚本 -->
<script src="https://webapi.amap.com/maps?v=1.4.15&key=c05b80f6f4af908c0236f5cdb55b9a54"></script>
<script src="https://unpkg.com/jsts@2.3.0/dist/jsts.min.js"></script>
<script src="../js/gis/jsts.min.js"></script>
<script src="../js/gis/terraformer.js"></script>
<script src="../js/gis/terraformer-wkt-parser.js"></script>
<script>
    var wkt = "MULTIPOLYGON(((121.685 39.4286, 121.685 39.4285, 121.684 39.4286, 121.684 39.4287, 121.684 39.4289, 121.684 39.429, 121.684 39.4291, 121.684 39.4292, 121.684 39.4293, 121.684 39.4293, 121.685 39.4292, 121.685 39.4292, 121.685 39.4291, 121.685 39.429, 121.685 39.4289, 121.685 39.4287, 121.685 39.4287, 121.685 39.4286, 121.685 39.4286)))";
    var primitive = Terraformer.WKT.parse(wkt);
    let path = [];
    let coordinates = primitive.coordinates[0][0];

    var gps = [116.3, 39.9];
    var map = new AMap.Map('container', {
        resizeEnable: true, //是否监控地图容器尺寸变化
        zoom: 11, //初始化地图层级
        layers: [
            // 卫星
            new AMap.TileLayer.Satellite(),
            // 路网
            new AMap.TileLayer.RoadNet()
        ],
        center: [122.917874, 41.696543] //初始化地图中心点
    });
    AMap.convertFrom(coordinates, 'gps', function (status, result) {
        if (result.info === 'ok') {
            var lnglats = result.locations; // Array.<LngLat>
            for (let m = 0; m < lnglats.length; m++) {
                // 多边形轮廓线的节点坐标数组
                path.push(new AMap.LngLat(lnglats[m]["lng"], coordinates[m]["lat"]));
            }
            var polygon = new AMap.Polygon({
                path: path,
                fillColor: '#821e1e', // 多边形填充颜色
                borderWeight: 100, // 线条宽度，默认为 1
                strokeColor: 'red', // 线条颜色
            });

            map.add(polygon);
            map.setFitView();
        }
    });
</script>
</body>
</html>
